import React from 'react';
import { useRef, useState } from "react";
import DiscoverVideo from './discoverVideo.jsx'
import DiscoverImg from './discoverImg.jsx'
import './CircleFriends.less'
import { postList, getList } from '../../../api/index'
import { useHistory } from 'react-router-dom'
import { NavBar, Popover, ActionSheet, Grid, Popup } from 'react-vant';
export default function CircleFriends(props) {
    const [state, showState] = useState(true)
    const [visible, setVisible] = useState(false)
    const [moveThoue, setMoveThoue] = useState(false)
    const [moveState, setMoveState] = useState('')
    //获取朋友圈数据
    const [allData, setAllData] = useState([])
    const [showPopup, setShowPopup] = useState(false);
    const navigation = useRef();

    React.useEffect(() => {
        scroll()
    })
    React.useEffect(() => {
        getList('/zbf/getList').then(res => {
            if (res.data.length > 0) {
                pai(res.data)
            }

        })
    }, [])
    function pai(data) {
        let arr = data.sort((prev, next) => {
            return next.time - prev.time
        })
        setAllData(arr)
    }
    const actions = [{ name: '选项一' }, { name: '选项二' }, { name: '选项三', subname: '描述信息' }];
    function scroll() {
        window.addEventListener('touchmove', () => {

            if (document.querySelector('.CircleFriends').scrollTop >= navigation.current.offsetHeight - 40) {
                navigation.current.children[0].style = 'background:#ededed;'
            } else {
                navigation.current.children[0].style = 'background: rgba(255, 255, 255, 0);'

            }
        })
    }
    const history = useHistory()
    //跳转页面
    const gotoUrl = (iten, row) => {
        window.removeEventListener('touchmove', () => { })
        history.push({
            pathname: iten,
            state: row
        })
    }
    function setvisible(eee) {
        // getList('/zbf/getList').then(res => {

        //     setAllData(res.data)
        // })
        if (eee !== undefined) {
            console.log(eee);
            let arr = JSON.parse(JSON.stringify(allData))
            arr.push(eee)
            pai(arr)

        }

        setVisible(3)

    }

    return (
        <div className='CircleFriends'>

            <div className='navigation' ref={navigation}>
                <NavBar

                    className='top'
                    title="朋友圈"
                    leftArrow
                    rightText={<svg className="icon icon-pengyouquan" aria-hidden="true"><use xlinkHref='#icon-paizhao'></use></svg>}
                    onClickLeft={() => { gotoUrl('/main/discover', '/main/circleFriends') }}
                    onClickRight={() => { setShowPopup(true) }}
                />
                <img onTouchStart={() => {
                    if (navigation.current.className === 'navigation') {
                        navigation.current.className = 'navigations'
                        showState(false)
                    } else {
                        navigation.current.className = 'navigation'
                        showState(true)
                    }
                }} className='img' src="https://img.alicdn.com/imgextra/i1/1276570100/O1CN01lnorXB1CbqJyAjVc3_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt="" />

                <div>
                    {
                        state ? (
                            <p className='navigation-bottom'>
                                <span>张博凡</span>
                                <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                            </p>
                        ) : (
                            <p className='icon-tupian'>
                                <svg className="icon" aria-hidden="true"><use xlinkHref='#icon-tupian'></use></svg>
                                <span>换封面</span>
                            </p>
                        )
                    }
                </div>
            </div>
            <div className="main" onTouchStart={() => {
                // showFlag(false)
            }}>
                {
                    allData.length > 0 ? (
                        allData.map((iten, index) => {
                            return <div key={index}>
                                <div className="left">
                                    <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                                </div>
                                <div className="right">
                                    <span>{iten.name}</span>
                                    <span>{iten.text}</span>
                                    <div className='right-main'>
                                        {
                                            iten.img === null ? <video
                                                autoPlay='autoPlay'
                                                muted={true}
                                                src={iten.video}
                                                loop  ></video> : <img src={iten.img} alt="" />
                                        }
                                    </div>
                                </div>
                            </div>
                        })
                    ) : ''
                }
                {/* <div>
                    <div className="left">
                        <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                    </div>
                    <div className="right">
                        <span>张博凡</span>
                        <span>你好</span>
                        <div className='right-main'>
                            <video
                                autoPlay='autoPlay'
                                muted={true}
                                src='https://apd-cff9bca8a28ce291d24b3927711b0cd9.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJfI-bGKb9pSFLq4_FGBlOgewTNh4JTV28VP35zC_Q08/u34733ctk5o.p201.1.mp4?fmt=shd&level=0&platform=10201&vkey=A2AB9D8B648DEE48925BCF2563B5DF594D3E0F42768B9BD50D3F78485E97F64332471373EECD902DA6459FDB74D84AC95B2AEEAC3D8003D5634015CC4BF1DB2E10D02DDCE17F8F3A9922008250500FA287D467A0A56BD517DC4E472D3D2D73822935BF60370242D914B339F65B0A5622452F5247C0BB3F3F'
                                loop  ></video>

                            <video
                                autoPlay='autoPlay'
                                muted={true}
                                src='https://apd-cff9bca8a28ce291d24b3927711b0cd9.v.smtcdns.com/vlive.qqvideo.tc.qq.com/AJfI-bGKb9pSFLq4_FGBlOgewTNh4JTV28VP35zC_Q08/u34733ctk5o.p201.1.mp4?fmt=shd&level=0&platform=10201&vkey=A2AB9D8B648DEE48925BCF2563B5DF594D3E0F42768B9BD50D3F78485E97F64332471373EECD902DA6459FDB74D84AC95B2AEEAC3D8003D5634015CC4BF1DB2E10D02DDCE17F8F3A9922008250500FA287D467A0A56BD517DC4E472D3D2D73822935BF60370242D914B339F65B0A5622452F5247C0BB3F3F'
                                loop  ></video>


                        </div>
                        <div className='right-bottom'>
                            <span>time</span>
                            <div className='one' >

                                <Popover placement="left" reference={<svg className="icon" aria-hidden="true"><use xlinkHref='#icon-gengduo2'></use></svg>}>
                                    <Grid className='two' square border={false} columnNum={3} style={{ width: 240 }}>
                                        <div className='zan'>
                                            <p>
                                                <svg className="icon" aria-hidden="true"><use xlinkHref='#icon-aixin'></use></svg>
                                                <span>赞</span>
                                            </p>
                                            <p>
                                                <svg className="icon" aria-hidden="true"><use xlinkHref='#icon-xiaoxi1-copy'></use></svg>
                                                <span>评论</span>
                                            </p>
                                        </div>

                                    </Grid>
                                </Popover>
                            </div>
                        </div>
                    </div>
                </div>
                <div>

                    <div className="left">
                        <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                    </div>
                    <div className="right">
                        <span>张博凡</span>
                        <span>你好</span>
                        <div className='right-main'>
                            <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                            <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                            <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                            <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                            <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                            <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                            <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                            <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                            <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                            <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                            <img src="https://img.alicdn.com/imgextra/i1/105430884/TB23IDDgtfJ8KJjy0FeXXXKEXXa_!!2-saturn_solar.png_468x468q75.jpg_.webp" alt="" />
                        </div>
                        <div className='right-bottom'>
                            <span>time</span>
                            <div className='one' >

                                <Popover placement="left" reference={<svg className="icon" aria-hidden="true"><use xlinkHref='#icon-gengduo2'></use></svg>}>
                                    <Grid className='two' square border={false} columnNum={3} style={{ width: 240 }}>
                                        <div className='zan'>
                                            <p>
                                                <svg className="icon" aria-hidden="true"><use xlinkHref='#icon-aixin'></use></svg>
                                                <span>赞</span>
                                            </p>
                                            <p>
                                                <svg className="icon" aria-hidden="true"><use xlinkHref='#icon-xiaoxi1-copy'></use></svg>
                                                <span>评论</span>
                                            </p>
                                        </div>

                                    </Grid>
                                </Popover>
                            </div>
                        </div>
                        <div className="right-footer">
                            张博凡: 123
                        </div>
                    </div>
                </div> */}
            </div>
            <Popup
                className='xuan'
                visible={showPopup}
                position="bottom"
                round
                style={{ height: '20%' }}
                onClose={() => setShowPopup(false)}>
                <p onClick={() => {
                    setVisible(1)
                    setShowPopup(false)
                }}>拍照</p>
                <p onClick={() => {
                    setVisible(2)
                    setShowPopup(false)
                }} >摄像</p>
            </Popup>
            {
                visible === 1 ? <DiscoverImg setvisible={setvisible}></DiscoverImg> : visible === 2 ? <DiscoverVideo setvisible={setvisible}></DiscoverVideo> : ''
            }
            {
                setMoveThoue ? 123 : 456
            }
        </div>
    )
}

